<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="年份:">
          <el-input v-model="form.year" />
        </el-form-item>
        <el-form-item label="月份:">
          <el-input v-model="form.month" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- <el-table :data="tableData" border style="width: 100%; margin-bottom: 32px;">
       <el-table-column prop="name" label="月份" width="80" />
       <el-table-column v-for="(item,index) in tableData" :key="index" prop="name">
          <template v-slot="label">{{ index }}月</template>
        </el-table-column>
      <el-table-column label="1" prop="name1" />
      </el-table> -->

      <el-table :data="tableData" border size="small" style="width: 100%; margin-bottom: 32px;">
        <el-table-column
          v-for="item in tableLabel"
          :key="item.label"
          :prop="item.prop"
          :label="item.label"
        />
      </el-table>
      <!-- <github-corner class="github-corner" /> -->
      <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->
      <el-row :gutter="64">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <div style="position: relative;left: 45%; font-size: 18px;">销售额</div>
            <pie-chart :chart-data="tableData1" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <div style="position: relative;left: 45%;  font-size: 18px;">销售量</div>
            <pie-chart :chart-data="tableData2" />
          </div>
        </el-col>
      </el-row>
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="lineChartData" />
      </el-row>
    </div>
  </div>
</template>

<script>
import LineChart from './dashboard/LineChart'
import PieChart from './dashboard/PieChart'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165, 222, 333, 443, 33, 4],
    actualData: [120, 82, 91, 154, 162, 140, 145, 100, 120, 161, 134, 222]
  }
}

export default {
  name: 'Dashboard',
  components: {
    LineChart,
    PieChart
  },
  data() {
    return {
      form: {
        year: '',
        month: ''
      },
      // 子组件的表头数据
      tableLabel: [
        { label: '月份', prop: 'name' },
        { label: '1月', prop: 'name1' },
        { label: '2月', prop: 'name2' },
        { label: '3月', prop: 'name3' },
        { label: '4月', prop: 'name4' },
        { label: '5月', prop: 'name5' },
        { label: '6月', prop: 'name6' },
        { label: '7月', prop: 'name7' },
        { label: '8月', prop: 'name8' },
        { label: '9月', prop: 'name9' },
        { label: '10月', prop: 'name10' },
        { label: '11月', prop: 'name11' },
        { label: '12月', prop: 'name12' }
      ],
      lineChartData: lineChartData.newVisitis,
      tableData: [{
        name: '销售量',
        name1: '566',
        name2: '444',
        name3: '554',
        name4: '544',
        name5: '345',
        name6: '343',
        name7: '766',
        name8: '988',
        name9: '345',
        name10: '343',
        name11: '766',
        name12: '988'
      }, {
        name: '销售额',
        name1: '566',
        name2: '444',
        name3: '554',
        name4: '544',
        name5: '345',
        name6: '343',
        name7: '766',
        name8: '988',
        name9: '345',
        name10: '343',
        name11: '766',
        name12: '988'
      }],
      tableData1: [
        { value: 320, name: '1月' },
        { value: 240, name: '2月' },
        { value: 149, name: '3月' },
        { value: 100, name: '4月' },
        { value: 159, name: '5月' },
        { value: 320, name: '6月' },
        { value: 240, name: '7月' },
        { value: 149, name: '8月' },
        { value: 100, name: '9月' },
        { value: 320, name: '10月' },
        { value: 240, name: '11月' },
        { value: 240, name: '12月' }], // 销售额
      tableData2: [
        { value: 320, name: '1月' },
        { value: 240, name: '2月' },
        { value: 149, name: '3月' },
        { value: 100, name: '4月' },
        { value: 159, name: '5月' },
        { value: 320, name: '6月' },
        { value: 240, name: '7月' },
        { value: 149, name: '8月' },
        { value: 100, name: '9月' },
        { value: 320, name: '10月' },
        { value: 240, name: '11月' },
        { value: 240, name: '12月' }
      ] // 销售量

    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {

    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    onSearch() {

    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
